/*
 * UC-SDK登录
 * @Author: Chenliang(930225)
 * @Date: 2019-10-12 14:22:20
 * @LastEditors  : Chenliang(930225)
 * @LastEditTime : 2020-01-19 17:51:13
 */

import React, { Component } from 'react';
import { message, Form, Icon, Input, Button } from 'antd';
import style from './index.scss';
import { UC } from '@sdp.nd/nd-uc-sdk';
// UC-SDK1.1  http://uc-doc.debug.web.nd/docs/uc-sdk/start.html
// 初始化UC
const uc = new UC({
    env: 'product'
})
class NormalLoginForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            CodePath: null
        };
    }
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                // 密码登录
                uc.login({
                    loginName: values.username,
                    password: values.password,
                    identifyCode: values.code
                }).then(token => {
                    message.success('登录成功');
                    // 获取当前用户及用户信息
                    const account = uc.getCurrentAccount()
                    account.getAccountInfo().then(accountInfo => {
                        console.log(accountInfo)
                    })
                }).catch((err) => {
                    message.error(err.message);
                })
            }
        });
    };
    componentDidMount() {
        // 获取验证码
        uc.getIdentifyCodePath().then(res => {
            this.setState({
                CodePath: res
            });
        })
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const { CodePath } = this.state;
        return (
            <Form onSubmit={this.handleSubmit} className={style.loginform}>
                <Form.Item>
                    {getFieldDecorator('username', {
                        rules: [{ required: true, message: '请输入用户名!' }],
                    })(
                        <Input
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="用户名"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('password', {
                        rules: [{ required: true, message: '请输入密码!' }],
                    })(
                        <Input
                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            type="password"
                            placeholder="密码"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('code', {
                        rules: [{ required: true, message: '请输入验证码!' }],
                    })(
                        <Input
                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            type="code"
                            placeholder="验证码"
                        />
                    )}
                </Form.Item>
                <img src={CodePath} alt="" />
                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        );
    }
}
const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);
export default WrappedNormalLoginForm;

